<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>sentox-ComboBox</title>
		<link type="text/css" rel="stylesheet" href="../css/themes/sentox/easyui.css" />
		<link type="text/css" rel="stylesheet" href="../css/themes/sentox/font-awesome.min.css">

		<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
	</head>

	<body style="margin:10px;">
		<h2>Basic ComboBox</h2>
		<p>Type in ComboBox to try auto complete.</p>
		<div style="margin:20px 0"></div>
		<select class="easyui-combobox" name="state" style="width:200px;">
			<option value="AL">Alabama</option>
			<option value="AK">Alaska</option>
			<option value="AZ">Arizona</option>
		</select>
		<!----------------------------------------------------------------------------------------------------------------------------->
		<h2>Fluid ComboBox</h2>
		<p>This example shows how to set the width of combobox to a percentage of its parent container.</p>
		<div style="margin:20px 0"></div>
		<p>width: 50%</p>
		<input class="easyui-combobox" name="language" style="width:50%"
				data-options="
					url: '../json/combobox_data2.json',
					method: 'get',
					valueField:'value',
					textField:'text',
					groupField:'group'
				">
		<p>width: 30%</p>
		<input class="easyui-combobox" name="language" style="width:30%"
				data-options="
					url:'../json/combobox_data1.json',
					method:'get',
					valueField:'id',
					textField:'text',
					panelHeight:'auto'
				">
		<!----------------------------------------------------------------------------------------------------------------------------->
		<h2>Multiline ComboBox</h2>
		<p>This example shows how to create a multiline ComboBox.</p>
		<div style="margin:20px 0"></div>
		<select class="easyui-combobox" name="state" data-options="multiple:true,multiline:true" style="width:200px;height:50px">
			<option value="AL">Alabama</option>
			<option value="AK">Alaska</option>
			<option value="AZ">Arizona</option>
			<option value="AR">Arkansas</option>
		</select>
		<!----------------------------------------------------------------------------------------------------------------------------->
		<h2>Group ComboBox</h2>
		<p>This example shows how to display combobox items in groups.</p>
		<div style="margin:20px 0"></div>
		<input class="easyui-combobox" name="browser" style="width:280px;" data-options="
					url: '../json/combobox_data2.json',
					method: 'get',
					valueField:'value',
					textField:'text',
					groupField:'group'
				">
		<!----------------------------------------------------------------------------------------------------------------------------->
		<h2>ComboBox with Extra Icons</h2>
		<p>The user can attach extra icons to the ComboBox.</p>
		<div style="margin:20px 0"></div>
		<input class="easyui-combobox" 
				name="language"
				data-options="
						url:'../json/combobox_data1.json',
						method:'get',
						valueField:'id',
						textField:'text',
						panelHeight:'auto',
						icons:[{
							iconCls:'fa fa-'
						},{
							iconCls:'fa fa-'
						}]
				">
		
	</body>

</html>